<template>
	<div class="page">
		<Head />
		<div class="mainBody">
			<div class="thirdGames routerView">
				<div class="flexContainer live">
					<div class="container">
						<div v-if="cur == 0">
							<img src="../assets/img/sports_agsports_left.png" alt="" class="leftImg animate__animated animate__bounceInLeft" style="">
							<img src="../assets/img/sports_agsports_right.png" alt="" class="rightImg animate__animated animate__bounceInRight" style="">
							<div class="playButton animate__animated animate__bounceInRight" style="">
								<img src="../assets/img/btn_play_now.1703fef2.png">
							</div>
						</div>
						<div v-if="cur == 1">
							<img src="../assets/img/sports_bbinsports_left.png" alt="" class="leftImg animate__animated animate__bounceInLeft" style="">
							<img src="../assets/img/sports_bbinsports_right.png" alt="" class="rightImg animate__animated animate__bounceInRight" style="">
							<div class="playButton animate__animated animate__bounceInRight" style="">
								<img src="../assets/img/btn_play_now.1703fef2.png">
							</div>
						</div>
						<div v-if="cur == 2">
							<img src="../assets/img/sports_sportsbook_left.png" alt="" class="leftImg animate__animated animate__bounceInLeft" style="">
							<img src="../assets/img/sports_sportsbook_right.png" alt="" class="rightImg animate__animated animate__bounceInRight" style="">
							<div class="playButton animate__animated animate__bounceInRight" style="">
								<img src="../assets/img/btn_play_now.1703fef2.png">
							</div>
						</div>
						<div v-if="cur == 3">
							<img src="../assets/img/sports_virtualsports_left.png" alt="" class="leftImg animate__animated animate__bounceInLeft" style="">
							<img src="../assets/img/sports_virtualsports_right.png" alt="" class="rightImg animate__animated animate__bounceInRight" style="">
							<div class="playButton animate__animated animate__bounceInRight" style="">
								<img src="../assets/img/btn_play_now.1703fef2.png">
							</div>
						</div>
					</div>
					<div class="main">
						<div class="providerList">
							<ul >
								<li @click="tab(0)" :class="cur == 0?'actived':''"><img src="../assets/img/sports_agsports_tab_nor.png"
										width="100%" height="100%" alt="" class="nor"><img
										src="../assets/img/sports_agsports_tab_sel.png" width="100%"
										height="100%" alt="" class="sel"></li>
								<li @click="tab(1)" :class="cur == 1?'actived':''"><img src="../assets/img/sports_bbinsports_tab_nor.png" width="100%"
										height="100%" alt="" class="nor"><img
										src="../assets/img/sports_bbinsports_tab_sel.png" width="100%"
										height="100%" alt="" class="sel"></li>
								<li @click="tab(2)" :class="cur == 2?'actived':''"><img src="../assets/img/sports_sportsbook_tab_nor.png" width="100%"
										height="100%" alt="" class="nor"><img
										src="../assets/img/sports_sportsbook_tab_sel.png" width="100%"
										height="100%" alt="" class="sel"></li>
								<li @click="tab(3)" :class="cur == 3?'actived':''"><img src="../assets/img/sports_virtualsports_tab_nor.png" width="100%"
										height="100%" alt="" class="nor"><img
										src="../assets/img/sports_virtualsports_tab_sel.png" width="100%"
										height="100%" alt="" class="sel"></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<Foot />
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	import Foot from '@/components/Foot.vue'
	export default {
		name: 'Home',
		components: {
			Head,
			Foot
		},
		data() {
			return {
				cur:0
			};
		},
		methods: {
			tab(i){this.cur = i}
		}
	}
</script>
